--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Commit d0db79e4e4ab2b3bc5d0e8ad02d8b66c6e872a43
Parents : c4f13e5
Author : Sudo-Ivan <ivan@quad4.io>
Signature : Signature validation error
Date : 2026-01-04T00:04:18-06:00
feat(RNodeFlasherPage): add new RNode Flasher page component and update ToolsPage to link to it
Changes
2 files changed, 60 insertions(+), 3 deletions(-)
Diff
diff --git a/meshchatx/src/frontend/components/tools/RNodeFlasherPage.vue b/meshchatx/src/frontend/components/tools/RNodeFlasherPage.vue
new file mode 100644
index 00000000..e06bc666
--- /dev/null
+++ b/meshchatx/src/frontend/components/tools/RNodeFlasherPage.vue
@@ -0,0 +1,47 @@
+<template>
+ <div class="flex flex-col h-full w-full bg-white dark:bg-zinc-950 overflow-hidden">
+ <!-- header -->
+ <div
+ class="flex items-center px-4 py-2 border-b border-gray-200 dark:border-zinc-800 bg-white/60 dark:bg-zinc-900/50 backdrop-blur-lg z-10 relative"
+ >
+ <div class="flex items-center space-x-2">
+ <v-icon icon="mdi-chip" color="purple" size="24"></v-icon>
+ <h1 class="text-xl font-black text-gray-900 dark:text-white">{{ $t("tools.rnode_flasher.title") }}</h1>
+ </div>
+
+ <div class="ml-auto flex items-center space-x-2">
+ <a
+ href="/rnode-flasher/index.html"
+ target="_blank"
+ class="p-2 text-gray-500 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors flex items-center gap-2 text-sm font-medium"
+ title="Open in new tab"
+ >
+ <MaterialDesignIcon icon-name="open-in-new" class="size-5" />
+ <span class="hidden sm:inline">Open in new tab</span>
+ </a>
+ <button
+ class="p-2 text-gray-500 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
+ @click="$router.push({ name: 'tools' })"
+ >
+ <MaterialDesignIcon icon-name="close" class="size-5" />
+ </button>
+ </div>
+ </div>
+
+ <!-- content -->
+ <div class="flex-1 min-h-0 relative">
+ <iframe src="/rnode-flasher/index.html" class="w-full h-full border-0" allow="serial"></iframe>
+ </div>
+ </div>
+</template>
+
+<script>
+import MaterialDesignIcon from "../MaterialDesignIcon.vue";
+
+export default {
+ name: "RNodeFlasherPage",
+ components: {
+ MaterialDesignIcon,
+ },
+};
+</script>
diff --git a/meshchatx/src/frontend/components/tools/ToolsPage.vue b/meshchatx/src/frontend/components/tools/ToolsPage.vue
index ff3c8bba..bb8a85dc 100644
--- a/meshchatx/src/frontend/components/tools/ToolsPage.vue
+++ b/meshchatx/src/frontend/components/tools/ToolsPage.vue
@@ -137,7 +137,7 @@
<MaterialDesignIcon icon-name="chevron-right" class="tool-card__chevron" />
</RouterLink>
- <a target="_blank" href="/rnode-flasher/index.html" class="tool-card glass-card">
+ <RouterLink :to="{ name: 'rnode-flasher' }" class="tool-card glass-card">
<div
class="tool-card__icon bg-purple-50 text-purple-500 dark:bg-purple-900/30 dark:text-purple-200"
>
@@ -149,8 +149,18 @@
{{ $t("tools.rnode_flasher.description") }}
</div>
</div>
- <MaterialDesignIcon icon-name="open-in-new" class="tool-card__chevron" />
- </a>
+ <div class="flex items-center gap-2">
+ <a
+ href="/rnode-flasher/index.html"
+ target="_blank"
+ class="p-2 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors text-gray-400 hover:text-blue-500"
+ @click.stop
+ >
+ <MaterialDesignIcon icon-name="open-in-new" class="size-5" />
+ </a>
+ <MaterialDesignIcon icon-name="chevron-right" class="tool-card__chevron" />
+ </div>
+ </RouterLink>
<RouterLink :to="{ name: 'debug-logs' }" class="tool-card glass-card border-dashed border-2">
<div class="tool-card__icon bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────